import React, {useState, useEffect} from 'react'

import ReactDOM from 'react-dom'

const App =() => {
    const [name, setName] = useState('张三')

    useEffect(() => {
        const timer = setInterval(() => {
            console.log(1)
        },1000)

        return () => {
            console.log('组件销毁之前')
            clearInterval(timer)
        }
    })
     return (
        <div>
        <h1>useState-{name}</h1>
        <button onClick={() => {
            setName('李四')
        }}>点击修改</button>
        </div>
     )
}

const App1 = () => {
    const [isShow, setIsShow] = useState(true)
    return (
        <div>
            <h1>App1</h1>
            <button onClick={() => {
                setIsShow(!isShow)
            }}>显示隐藏app</button>
            {
                isShow ? ( <App/> ) : null
            }
            
        </div>
    )
}

const App2 = () => {
    const [name, setName]  = useState('老王')
    const [age, setAge] = useState('永远18')
    useEffect(() => {
        console.log('我进来了没')
    }, [])
    return (
        <div>
            <h1>useEffect</h1>
            <p>{name}</p>
            <p>{age}</p>
            <button onClick={() => {
                setName('华南')
            }}>修改名字</button>
            <button onClick={() => {
                setAge('19')
            }}>修改年龄</button>
        </div>
    )
}
ReactDOM.render(<App2/>, document.getElementById('root'))